<template>
<div class="box">
    <fou-dialog :title="'已添加產品列表'" v-model:dialogValue="ProductDia" :width="'75%'">
        <template #content="">
                <el-button color="#081F42" @click="addProduct">添加產品</el-button>
                <ProTable
                :data="dataList"
                :page="{}"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
           
                >
                <template #default="{ row, propname }">
                    <div v-if="propname === 'price'">
                          <el-input v-model="row[propname]" :min="1" type="number" ></el-input>
                    </div>
                    <div v-if="propname === 'num'">
                          <el-input v-model="row[propname]" :min="1" type="number"></el-input>
                    </div>
                    <div v-if="propname === 'remark'">
                          <el-input v-model="row[propname]" ></el-input>
                    </div>
                </template>
                <template #search_operate>
                    <el-table-column  fixed="right" width="240px" >
                        <template #header>
                                <el-input  clearable v-model="search" placeholder="搜索(內容)" class="input">
                                </el-input>
                        </template>
                        <template #default="scope">
                              <el-link  type="primary" @click="handDelete(scope.$index,scope.row)" :underline="false">
                                  刪除
                              </el-link>
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.current_page" :page-size="page.per_page" layout="total, prev, pager, next"
                :total="page.total">
                </el-pagination>

        </template>
        <template #footer>

            <div >
            <el-button @click="dialogValue = false">取消</el-button>
            <el-button type="primary" @click="confirm" color="#081F42">確定</el-button>
           </div>
        </template>
    </fou-dialog>
    <product-dialog ref="productRef" @update="getProduct"></product-dialog>
</div>
</template>

<script setup>
import { ref ,reactive,computed} from 'vue' 
import {SchoolList} from '@/http/index.js'
import {elProps,controlWidth} from './index.js'
import { loading ,closeLoading} from '@/common/function.js'
import productDialog from '../dialog/product.vue'

      // 初始化
     const init = (data, index)=> {
      console.log(data, index);
        if (data) {
          console.log(data);
          tableData.value = data
          ProductIndex.value = index
          page.total = tableData.value.length
        }
        ProductDia.value = true
      }

const emit = defineEmits(['setSchoolProduct'])


const ProductDia = ref(false)
const column = {
  number:'編號',
  name:'名稱',
  price :'價格',
  num:'數量',
  remark:'備註',
}
// 添加產品
const search = ref('')
const productRef = ref('')
const addProduct = ()=>{
productRef.value.TableData(localStorage.getItem('supplier_id'))
productRef.value.TableDatatype()
productRef.value.productDia = true
}
const page = reactive({current_page: 1,per_page: 10,total: 0,page_size: [10, 20, 30]})
const dataList = computed(()=>{
        const dataCodeList = tableData.value
        const pagesize = page.per_page
        const currentPage = page.current_page
        let newList = dataCodeList.slice((currentPage - 1) * pagesize, pagesize * currentPage)
        if(search.value !== ''){
          newList = newList.filter(v=>{
            return v.name.indexOf(search.value) !== -1
          })
        }
        console.log(newList);
        return newList
})
   const handleSizeChange=(size)=> {
        page.per_page = size
      }
      const handleCurrentChange=(currentPage)=> {
        page.current_page = currentPage
      }
// 獲取產品數據
const tableData = ref([])
const ProductIndex = ref('')
const getProduct = (val)=>{
  console.log(val);
    val.map(e=>e.num = 1)
    tableData.value = val
    page.total = val.length
}
// 刪除產品數據
const handDelete = (index)=>{
tableData.value.splice(index, 1)
}

const confirm = ()=>{
tableData.value.map(e=>e.product_id = e.id)
 emit('setSchoolProduct',tableData.value,ProductIndex.value)
 ProductDia.value = false
}

defineExpose({
ProductDia,init
})
</script>

<style lang='less'  scoped>
.box{
//   :deep(.el-dialog__body){
//   padding:0 20px!important;
//   }
//   :deep(.el-dialog__footer){
//     padding: 0 !important;

//   }
  :deep(.tableflex[data-v-0985d712]){
    margin-top: 15px;
  }
}
</style>